<template>
  <div>
    <el-dropdown style="display: inline-block; height: 100%; vertical-align: initial">
      <span style="cursor: pointer">
        <el-avatar class="avatar" size="small" shape="circle"
                  :src="avatar"/>
        <span class="curr-user">{{user.username}}</span>
      </span>
      <el-dropdown-menu style="width: 150px" slot="overlay">
        <el-dropdown-item @click="openProfile" divided>
          <!-- <a-icon type="user"/> -->
          <i class="el-icon-user"></i>
          <span>个人中心</span>
        </el-dropdown-item>
        <el-dropdown-item @click="updatePassword" divided> 
          <!-- <a-icon type="key"/> -->
          <i class="el-icon-key"></i>
          <span>密码修改</span>
        </el-dropdown-item>
        <!-- <a-menu-divider></a-menu-divider> -->
        <el-dropdown-item @click="handleSettingClick" divided>
          <!-- <a-icon type="setting"/> -->
          <i class="el-icon-setting"></i>
          <span>系统定制</span>
        </el-dropdown-item>
        <!-- <a-menu-divider></a-menu-divider> -->
        <el-dropdown-item @click="logout" divided>
          <!-- <a-icon type="logout"/> -->
          <i class="el-icon-thumb"></i>
          <span>退出登录</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <update-password
      @success="handleUpdate"
      @cancel="handleCancelUpdate"
      :user="user"
      :updatePasswordModelVisible="updatePasswordModelVisible">
    </update-password>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import UpdatePassword from '../personal/UpdatePassword'

export default {
  name: 'HeaderAvatar',
  components: {UpdatePassword},
  data () {
    return {
      updatePasswordModelVisible: false
    }
  },
  computed: {
    ...mapState({
      settingBar: state => state.setting.settingBar.opened,
      user: state => state.account.user
    }),
    avatar () {
      return `static/avatar/${this.user.avatar}`
    }
  },
  methods: {
    handleSettingClick () {
      this.setSettingBar(!this.settingBar)
    },
    openProfile () {
      this.$router.push('/profile')
    },
    updatePassword () {
      this.updatePasswordModelVisible = true
    },
    handleCancelUpdate () {
      this.updatePasswordModelVisible = false
    },
    handleUpdate () {
      this.updatePasswordModelVisible = false
      this.$message.success('更新密码成功，请重新登录系统')
      setTimeout(() => {
        this.logout()
      }, 1500)
    },
    logout () {
      this.$get(`logout/${this.user.id}`).then(() => {
        return new Promise((resolve, reject) => {
          this.$db.clear()
          location.reload()
        })
      }).catch(() => {
        this.$message.error('退出系统失败')
      })
    },
    ...mapMutations({setSettingBar: 'setting/setSettingBar'})
  }
}
</script>

<style lang="less" scoped>
  .ant-avatar-sm {
    width: 30px;
    height: 30px;
  }
  .avatar {
    margin: 20px 4px 20px 0;
    color: #1890ff;
    background: hsla(0, 0%, 100%, .85);
    vertical-align: middle;
  }
  .curr-user {
    font-weight: 600;
    margin-left: 6px
  }
</style>
